<template>
	<view class="ratePopupCom">
		<u-popup :show="ratePopupShow" mode="bottom" @close="ratePopupClose" :round="10">
			<view class="ratePopup">
				<view class="ratePopup_inner_top">
					<view class="fn-sz-34 fn-cl-333333" v-if="orderType == 'goods'">请对商品评分</view>
					<view class="fn-sz-34 fn-cl-333333" v-else>请对景点评分</view>
					<image class="icon-30" @tap="ratePopupShow = false"
						src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="rate_star_box">
					<Rate :value="goodsRateObj.star" :size="58"></Rate>
				</view>
				<view class="area-title">评价</view>
				<view class="message_input"><textarea v-model="goodsRateObj.content" placeholder="请输入你的评论"></textarea>
				</view>
				<view class="area-title">评价照片</view>
				<view class="upload_img_list">
					<uploadImage :maxCount="9" @success="uploadSuccess"></uploadImage>
				</view>
				<view class="yellow_btn" @tap="submitRate">确认提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Rate from '../rate/rate.vue';
	import uploadImage from '../uploadImage/uploadImage.vue';

	export default {
		name: 'ratePopup',
		components: {
			Rate
		},
		props: {
			orderInfo: {
				type: Object,
				default: () => ({})
			},
			orderType: {
				type: String,
				defalut: 'goods'
			}
		},
		data() {
			return {
				ratePopupShow: false,
				qiniuUrl: 'http://qiniu.zhinh.cn/',
				messageObj: {
					content: '',
					images: ''
				},

				goodsRateObj: {
					star: 5,
					content: '',
					images: ''
				},
				team_product_id: ''
			};
		},
		methods: {
			ratePopupClose() {
				this.ratePopupShow = false;
			},
			submitRate() {
				if (this.orderType == 'goods') {
					let params = {
						...this.goodsRateObj,
						order_id: this.orderInfo.id,
						team_product_id: this.team_product_id
					};
					this.$api.commentOrder(params).then(res => {
						this.$helper.toast(res.msg);
						if (res.code == 1) {
							this.$emit('successSubmitRate');
							this.ratePopupShow = false;
						}
					});
				} else if (this.orderType == 'prizeTour') {
					let params = {
						...this.goodsRateObj,
						order_id: this.orderInfo.order_info.id
					};
					this.$api.commentTourOrder(params).then(res => {
						this.$helper.toast(res.msg);
						if (res.code == 1) {
							this.$emit('successSubmitRate');
							this.ratePopupShow = false;
						}
					});
				} else if (this.orderType == 'prizeGoods') {
					let params = {
						...this.goodsRateObj,
						order_id: this.orderInfo.order_info.id,
						team_product_id: this.orderInfo.product_id
					};
					this.$api.commentOrder(params).then(res => {
						this.$helper.toast(res.msg);
						if (res.code == 1) {
							this.$emit('successSubmitRate');
							this.ratePopupShow = false;
						}
					});
				} else {
					let params = {
						...this.goodsRateObj,
						order_id: this.orderInfo.id
					};
					this.$api.commentTourOrder(params).then(res => {
						this.$helper.toast(res.msg);
						if (res.code == 1) {
							this.$emit('successSubmitRate');
							this.ratePopupShow = false;
						}
					});
				}
			},
			uploadSuccess(val) {
				this.goodsRateObj.images = val.map(item => this.qiniuUrl + item.url) + '';
			}
		}
	};
</script>

<style lang="scss">
	.ratePopupCom {
		.ratePopup {
			padding: 24rpx;

			.ratePopup_inner_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
			}

			.rate_star_box {
				margin-bottom: 38rpx;
				display: flex;
				justify-content: center;
			}
		}
	}

	.message_input {
		height: 200rpx;
		box-sizing: border-box;
		background: #f9f9f9;
		border-radius: 10rpx;
		padding: 20rpx 26rpx;
		margin-bottom: 40rpx;

		textarea {
			color: #999999;
			font-size: 28rpx;
		}
	}

	.upload_img_list {
		margin-bottom: 40rpx;
	}
</style>